<template>
  <div>
    <div>
      <el-form :inline="true">
        <el-form-item prop="" label="学校名称">
          <el-input v-model="table.search" placeholder="请输入学校名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearch">{{ $t('search') }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table v-loading="table.loading" :data="table.data" border>
        <el-table-column prop="title" label="学校名称" fixed />
        <el-table-column :label="$t('op')" width="120">
          <template slot-scope="s">
            <el-button type="primary" icon="el-icon-view" size="mini" @click="handleViewTeacher(s)">查看教师</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        class="pagination"
        :current-page="table.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="table.size"
        layout="prev, pager, next"
        :total="table.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <div>
      <el-dialog v-if="teacherDialog.visible" :title="teacherDialog.title" :visible.sync="teacherDialog.visible" :fullscreen="true" @close="handleTeacherDialogClose">
        <div>
          <div>
            <el-form :inline="true" size="mini">
              <el-form-item prop="" label="教师名称">
                <el-input v-model="teacherDialog.search" placeholder="请输入教师名称" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearchTeacher">{{ $t('search') }}</el-button>
                <el-upload
                  class="upload-btn"
                  :action="upload.action"
                  :headers="upload.headers"
                  accept=".xls,.xlsx"
                  :show-file-list="upload.showFileList"
                  :before-upload="handleBeforeUpload"
                  :on-change="handleUploadChange"
                  :on-error="handleUploadError"
                  :on-success="handleUploadSuccess"
                >
                  <el-button v-if="false" type="primary" icon="el-icon-upload" size="mini">导入教师</el-button>
                </el-upload>
                <el-button v-if="false" type="primary" icon="el-icon-download" size="mini" @click="handleDownload">下载模板</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div>
            <el-table v-loading="teacherDialog.loading" :data="teacherDialog.data" border>
              <el-table-column label="详情" type="expand">
                <template slot-scope="props">
                  <el-form inline>
                    <el-form-item label="昵称">
                      <span>{{ props.row.nick_name }}</span>
                    </el-form-item>
                    <el-form-item label="班级">
                      <span>{{ props.row.grade_name }}</span>
                    </el-form-item>
                    <el-form-item label="激活状态">
                      <span>{{ props.row.active }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column label="名称" prop="name" />
              <el-table-column :label="$t('op')" width="200">
                <template slot-scope="s">
                  <!--                  <el-button v-if="s.row.is_login!=1" type="primary" size="mini" @click="handleEnable(s,1)">开启登录</el-button>-->
                  <!--                  <el-button v-if="s.row.is_login==1" type="danger" size="mini" @click="handleEnable(s,2)">禁止登录</el-button>-->
                  <!--                  <el-button v-if="s.row.is_active!=1" type="primary" size="mini" @click="handleActive(s,1)">激活</el-button>-->
                  <!--                  <el-button v-if="s.row.is_active==1" type="danger" size="mini" @click="handleActive(s,2)">取消激活</el-button>-->
                  <el-button v-if="s.row.audit==1" type="danger" size="mini" @click="handleAudit(s,0)">取消激活</el-button>
                  <el-button v-if="s.row.audit==0" type="primary" size="mini" @click="handleAudit(s,1)">激活</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div>
            <el-pagination
              class="pagination"
              :current-page="teacherDialog.page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="teacherDialog.size"
              layout="prev, pager, next"
              :total="teacherDialog.total"
              @size-change="handleTeacherSizeChange"
              @current-change="handleTeacherCurrentChange"
            />
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getList, getTeacherList, enableTeacher, activeTeacher, auditTeacher } from '../../api/school'
import { getToken } from '../../utils/auth'
const initTeacher = {
  visible: false,
  title: '',
  loading: false,
  school: 0,
  data: [],
  total: 0,
  page: 1,
  size: 10,
  search: ''
}
export default {
  data() {
    return {
      table: {
        data: [],
        total: 0,
        loading: false,
        page: 1,
        size: 10,
        search: ''
      },
      teacherDialog: Object.assign({}, initTeacher),
      upload: {
        loading: null,
        headers: {},
        action: '',
        showFileList: false
      }
    }
  },
  mounted() {
    this.getList()
    this.upload.headers = {
      authorization: 'bearer ' + getToken(),
      accept: 'application/json'
    }

    this.upload.action = ''
  },
  methods: {
    getList() {
      this.table.loading = true
      getList({
        limit: this.table.size,
        page: this.table.page,
        search: this.table.search
      }).then(res => {
        this.table = Object.assign({}, this.table, {
          total: res.total,
          data: res.data
        })
      }).finally(() => {
        this.table.loading = false
      })
    },
    getTeacherList() {
      this.teacherDialog.loading = true
      return getTeacherList({
        limit: this.teacherDialog.size,
        page: this.teacherDialog.page,
        school_id: this.teacherDialog.school,
        search: this.teacherDialog.search
      }).then(res => {
        this.teacherDialog = Object.assign({}, this.teacherDialog, {
          total: res.total,
          data: res.data
        })
      }).finally(() => {
        this.teacherDialog.loading = false
      })
    },
    handleCurrentChange(page) {
      this.table = Object.assign({}, this.table, {
        page: page
      })
      this.getList()
    },
    handleSizeChange(size) {
      this.table = Object.assign({}, this.table, {
        size: size
      })
      this.getList()
    },
    handleSearch() {
      this.table = Object.assign({}, this.table, {
        search: this.table.search
      })
      this.getList()
    },
    handleSearchTeacher() {
      this.teacherDialog = Object.assign({}, this.teacherDialog, {
        search: this.teacherDialog.search
      })
      this.getTeacherList()
    },
    handleActive(scope, value) {
      const message = {
        1: '您正在激活该教师, 是否继续?',
        2: '您正在撤销该教师的激活, 是否继续?'
      }
      this.$confirm(message[value], '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'confirmDialog',
        center: true,
        type: 'warning'
      }).then(() => {
        activeTeacher(scope.row.id, value).then(() => {
          this.$message.success('操作成功')
          this.getTeacherList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    handleAudit(scope, value) {
      const message = {
        1: '您正在激活该教师, 是否继续?',
        0: '您正在撤销该教师的激活, 是否继续?'
      }
      this.$confirm(message[value], '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'confirmDialog',
        center: true,
        type: 'warning'
      }).then(() => {
        auditTeacher(scope.row.id, value).then(() => {
          this.$message.success('操作成功')
          this.getTeacherList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    handleEnable(scope, value) {
      const message = {
        1: '您正在允许该教师登录, 是否继续?',
        2: '您正在禁止该教师登录, 是否继续?'
      }
      this.$confirm(message[value], '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'confirmDialog',
        center: true,
        type: 'warning'
      }).then(() => {
        enableTeacher(scope.row.id, value).then(() => {
          this.$message.success('操作成功')
          this.getTeacherList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    handleTeacherCurrentChange(page) {
      this.teacherDialog = Object.assign({}, this.teacherDialog, {
        page: page
      })
      this.getTeacherList()
    },
    handleTeacherSizeChange(size) {
      this.teacherDialog = Object.assign({}, this.teacherDialog, {
        size: size
      })
      this.getTeacherList()
    },
    handleViewTeacher(s) {
      this.teacherDialog.school = s.row.id
      this.getTeacherList().then(() => {
        this.upload.action = 'http://127.0.0.1:7100/api/schools/' + s.row.id + '/import-teacher'
        this.teacherDialog.title = s.row.title + '-教师管理'
        this.teacherDialog.visible = true
      })
    },
    handleDownload() {
      const a = document.createElement('a')
      a.href = '/api/template-url'
      a.click()
    },
    handleBeforeUpload(file) {
      this.upload.loading = this.$loading({
        lock: true,
        text: '上传中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    handleUploadChange(file, fileList) {
      if (this.upload.loading) {
        this.upload.loading.close()
      }
    },
    handleUploadError(e, file, fileList) {
      // console.log(err)
      this.$message.error('上传失败')
    },
    handleUploadSuccess(response, file, fileList) {
      this.$message.success('上传成功')
    },
    handleTeacherDialogClose() {
      this.teacherDialog = Object.assign({}, initTeacher)
    }
  }
}
</script>
<style>
  .el-message-box__wrapper>.confirmDialog {
    width: 60%;
  }
</style>
<style scoped>
  .pagination {
    margin-top: 10px;
  }
  .upload-btn {
    display: inline-block;
  }
</style>
